<template>
  <!-- 广告组件基础结构 -->
  <div class="home-banner">
    <!-- 广告组件获取数据,传给轮播图 -->
    <!-- 使用自动播放得加auto-play -->
    <TiziCarousel auto-play :sliders="sliders" />
  </div>
</template>

<script>
import {ref} from 'vue'
import {findBanner} from '@/api/home'
export default {
    name:'HomeBanner',
    setup(){
         // 获取轮播图数据
        const sliders = ref([])
        findBanner().then(data => {
            sliders.value = data.result
        })
        return { sliders }
    }
}
</script>

<style lang="less" scoped>
.home-banner {
    width: 1240px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98;
}

// 覆盖轮播图组件样式
.tizi-carousel {
    // 移动左侧按钮位置
    ::v-deep .carousel-btn.prev {
        left: 270px;
    }
    // 移动轮播图下选按钮位置
    ::v-deep .carousel-indicator {
        padding-left: 250px;
    }
}
</style>